@extends('admin.layout.common')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/user/personal.css')}}">
    <link rel="stylesheet" href="{{url('/common/css/element.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/app.css')}}">
    <style>
        header ul li:last-child img {
            width: 30px;
            transform: translateY(0%);
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 360px;
            height: 470px;
            display: block;
        }
    </style>
    <div class="content">
        <h1 class="h1">我的个人中心</h1>
        <div class="mon">
            <div id="app" class="article">
                <el-upload
                        class="avatar-uploader"
                        action="http://{{$_SERVER['HTTP_HOST']}}/admin/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                点击图片更改照片
            </div>
            <!-- 个人信息内容 -->
            <form action="adminInfo" method="post" >
            {{csrf_field()}}
                <label for=""><input type="hidden" name="id" value="{{$adminInfo['id']}}"/></label>
                <p style="margin-top:9px"><label>姓名：<input type="text" name="name" value="{{$adminInfo['name']}}"></label></p>
                <p><label>部门：<input type="text"  readonly= "true" value="{{$adminInfo['department_name']}}"></label></p>
                <p><label>角色：<input type="text"  readonly= "true" value="{{$adminInfo['work']}}"></label></p>
                <p><label>入职时间：<input type="text" readonly= "true" value="{{$adminInfo['create_time']}}"></label></p>
                <p><label>手机号码：<input type="text" name="phone" value="{{$adminInfo['phone']}}"><input type="submit" value="修改" class="xiugai btn1"></label></p>
            </form>
        </div>
    </div>
    <script src="{{url('/common/js/element/vue.js')}}"></script>
    <script src="{{url('/common/js/element/element.js')}}"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    imageUrl: '{{$adminInfo['head_portrait']}}'
                };
            },
            methods: {
                handleAvatarSuccess(res, file) {
                    $.post('http://{{$_SERVER['HTTP_HOST']}}/admin/updateUserImage',{id:{{$adminInfo['id']}},url:res.res.url},function(data){
                        layer.msg('修改成功');
                    })
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    // if (!isJPG) {
                    //     this.$message.error('上传头像图片只能是 JPG 格式!');
                    // }
                    // if (!isLt2M) {
                    //     this.$message.error('上传头像图片大小不能超过 2MB!');
                    // }
                    // return isJPG && isLt2M;
                }
            }
        })
    </script>
    <script type="text/javascript" src="{{asset('js/user/personal.js')}}"></script>
@endsection

